<template>
  <div class="table">
    <div class="search">
      <el-input v-model="input3" style="max-width: 600px" placeholder="请输入关键字" class="input-with-select">
        <template #append>
          <el-button color="#1881FF" type="primary" :icon="Search">搜索</el-button>
        </template>
      </el-input>
      <el-date-picker
        style="margin-left: 20px"
        v-model="value2"
        type="daterange"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
      />
    </div>
    <div class="filter-section">
      <div class="title">活动类型</div>
      <div class="filter-options">
        <span
          v-for="method in type"
          :key="method.value"
          class="filter-option"
          :class="{ active: selectedFilters.type === method.value }"
          @click="toggleTypeMethod(method.value)"
        >
          {{ method.lable }}
        </span>
      </div>
    </div>
    <div class="filter-section">
      <div class="title">报名方式</div>
      <div class="filter-options">
        <span
          v-for="method in signupMethods"
          :key="method.value"
          class="filter-option"
          :class="{ active: selectedFilters.signup === method.value }"
          @click="toggleSignupMethod(method.value)"
        >
          {{ method.lable }}
        </span>
      </div>
    </div>

    <!-- 主办单位 -->
    <div class="filter-section">
      <div class="title">主办单位</div>
      <div class="filter-options">
        <span
          v-for="org in organizers"
          :key="org.value"
          class="filter-option"
          :class="{ active: selectedFilters.organizer === org.value }"
          @click="toggleOrganizer(org.value)"
        >
          {{ org.lable }}
        </span>
      </div>
    </div>

    <!-- 适合学段 -->
    <div class="filter-section">
      <div class="title">适合学段</div>
      <div class="filter-options">
        <span
          v-for="stage in schoolStages"
          :key="stage.value"
          class="filter-option"
          :class="{ active: selectedFilters.stage === stage.value }"
          @click="toggleSchoolStage(stage.value)"
        >
          {{ stage.lable }}
        </span>
      </div>
    </div>
    <el-divider />
    <ActiveItem @click="handleDetail" v-for="item in 10" :key="item" />
    <div class="pagination">
      <el-pagination
        :background="true"
        :current-page="pageable.currentPage"
        :page-size="pageable.pageSize"
        :page-sizes="[10, 25, 50, 100]"
        :total="pageable.total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script setup>
import { Search } from "@element-plus/icons-vue";
import { ref, reactive } from "vue";
import ActiveItem from "./activeItem.vue";
import { useRouter } from "vue-router";
const router = useRouter();

const input3 = ref("");
const value2 = ref([new Date(), new Date()]);
const pageable = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 10
});
const selectedFilters = reactive({
  type: "",
  signup: "",
  organizer: "",
  stage: ""
});

const type = [
  { lable: "线上活动", value: 1 },
  { lable: "线下活动", value: 2 }
];
const signupMethods = [
  { lable: "线上报名", value: 1 },
  { lable: "线下报名", value: 2 }
];
const organizers = [
  { lable: "省教育厅", value: 1 },
  { lable: "台州市教育局", value: 2 },
  { lable: "温岭市教育局", value: 3 },
  { lable: "其他", value: 4 }
];
const schoolStages = [
  { lable: "小学", value: 1 },
  { lable: "初中", value: 2 },
  { lable: "高中", value: 3 }
];
const toggleTypeMethod = type => {
  if (selectedFilters.type === type) {
    selectedFilters.type = "";
  } else {
    selectedFilters.type = type;
  }
};
const toggleSignupMethod = method => {
  if (selectedFilters.signup === method) {
    selectedFilters.signup = "";
  } else {
    selectedFilters.signup = method;
  }
};

function handleDetail() {
  router.push("/activeDetail/index");
}
const toggleOrganizer = org => {
  if (selectedFilters.organizer === org) {
    selectedFilters.organizer = "";
  } else {
    selectedFilters.organizer = org;
  }
  console.log("selectedFilters.organizer", selectedFilters.organizer);
};

const toggleSchoolStage = stage => {
  if (selectedFilters.stage === stage) {
    selectedFilters.stage = "";
  } else {
    selectedFilters.stage = stage;
  }
};
</script>
<style lang="scss" scoped>
.table {
  box-sizing: border-box;
  width: 1618px;
  padding: 31px 52px;
  margin: 0 auto;
  border: 1px solid #e8f2ff;
  border-radius: 10px;
  box-shadow: 0 0 10px 0 rgb(0 0 0 / 10%);
  .search {
    margin-bottom: 15px;
  }
  .filter-section {
    display: flex;
    gap: 25px;
    align-items: center;
    div {
      margin: 0 0 10px;
      font-size: 16px;
      color: #558eda;
    }

    margin-bottom: 8px;
    font-size: 14px;
    .filter-options {
      color: #3963a6;
      .filter-option {
        display: inline-block;
        padding: 4px 14px;
        margin-right: 15px;
        cursor: pointer;
      }
      .active {
        font-weight: 700;
        color: #1881ff;
        background-color: #e8f2ff;
        border-radius: 10px;
      }
    }
  }
  .pagination {
    display: flex;
    flex-direction: row-reverse;
    margin-top: 40px;
  }
}
</style>
